<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoteGen - 轻量级 AI 笔记应用完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .section-title {
            position: relative;
            padding-bottom: 1rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
        }
        .content-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
        .highlight-box {
            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
            border-left: 4px solid #667eea;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            margin: 1rem 0;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .image-container {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin: 1.5rem 0;
        }
        .image-container img {
            width: 100%;
            height: auto;
            display: block;
        }
        .tip-card {
            background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
            color: #2d3436;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            margin: 1rem 0;
            position: relative;
            padding-left: 3.5rem;
        }
        .tip-card::before {
            content: '\f0eb';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            color: #f39c12;
        }
        .warning-card {
            background: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            margin: 1rem 0;
            position: relative;
            padding-left: 3.5rem;
        }
        .warning-card::before {
            content: '\f071';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
        }
        .nav-item {
            transition: all 0.3s ease;
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }
        .nav-item:hover {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .feature-item {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        .feature-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        }
        .code-block {
            background: #2d3436;
            color: #dfe6e9;
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1rem 0;
            font-family: 'Courier New', monospace;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.6s ease-out;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white">
        <div class="container mx-auto px-6 py-20">
            <div class="text-center fade-in">
                <h1 class="text-5xl font-bold mb-6">NoteGen</h1>
                <p class="text-2xl mb-4">轻量级 AI 笔记应用完全指南</p>
                <p class="text-lg opacity-90 max-w-3xl mx-auto">集成 AI 辅助功能的跨平台 Markdown 笔记应用，帮助你高效记录碎片化信息并整理成结构化笔记</p>
                <div class="mt-10 flex justify-center space-x-6">
                    <div class="text-center">
                        <i class="fas fa-weight text-3xl mb-2"></i>
                        <p class="text-sm">仅 20MB</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-globe text-3xl mb-2"></i>
                        <p class="text-sm">跨平台支持</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-robot text-3xl mb-2"></i>
                        <p class="text-sm">AI 增强</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-shield-alt text-3xl mb-2"></i>
                        <p class="text-sm">隐私安全</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="sticky top-0 bg-white shadow-md z-50">
        <div class="container mx-auto px-6">
            <div class="flex overflow-x-auto py-4 space-x-4">
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('install')">
                    <i class="fas fa-download mr-2"></i>安装设置
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('record')">
                    <i class="fas fa-pen mr-2"></i>记录功能
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('write')">
                    <i class="fas fa-file-alt mr-2"></i>写作功能
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('model')">
                    <i class="fas fa-brain mr-2"></i>模型配置
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('sync')">
                    <i class="fas fa-sync mr-2"></i>同步配置
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('knowledge')">
                    <i class="fas fa-database mr-2"></i>知识库
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        <!-- 核心功能概览 -->
        <div class="content-card fade-in">
            <h2 class="text-3xl font-bold mb-6 section-title">核心功能概览</h2>
            <div class="mermaid">
                graph TD
                    A[NoteGen] --> B[记录功能]
                    A --> C[写作功能]
                    A --> D[AI 辅助]
                    A --> E[同步备份]
                    
                    B --> B1[文本记录]
                    B --> B2[截图/图片]
                    B --> B3[文件/链接]
                    B --> B4[剪贴板助手]
                    
                    C --> C1[Markdown 编辑器]
                    C --> C2[文件管理器]
                    C --> C3[版本控制]
                    
                    D --> D1[对话/续写]
                    D --> D2[润色/翻译]
                    D --> D3[RAG 知识库]
                    
                    E --> E1[Github/Gitee]
                    E --> E2[WebDAV]
                    E --> E3[历史回滚]
                    
                    style A fill:#667eea,stroke:#fff,stroke-width:3px,color:#fff
                    style B fill:#74b9ff,stroke:#fff,stroke-width:2px,color:#fff
                    style C fill:#a29bfe,stroke:#fff,stroke-width:2px,color:#fff
                    style D fill:#fd79a8,stroke:#fff,stroke-width:2px,color:#fff
                    style E fill:#fdcb6e,stroke:#fff,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- 安装与初始设置 -->
        <div id="install" class="content-card fade-in">
            <h2 class="text-3xl font-bold mb-6 section-title">
                <i class="fas fa-download feature-icon mr-3"></i>安装与初始设置
            </h2>
            
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">下载与安装</h3>
                <div class="feature-grid">
                    <div class="feature-item">
                        <i class="fas fa-weight text-2xl text-purple-600 mb-3"></i>
                        <h4 class="font-semibold mb-2">轻量设计</h4>
                        <p class="text-gray-600">安装包仅 20MB，免费且无广告</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-laptop text-2xl text-purple-600 mb-3"></i>
                        <h4 class="font-semibold mb-2">跨平台支持</h4>
                        <p class="text-gray-600">支持 Mac、Windows、Linux、iOS 和 Android</p>
                    </div>
                </div>
                
                <div class="highlight-box mt-6">
                    <p class="mb-2">访问 <a href="https://notegen.top/" class="text-purple-600 hover:underline font-semibold">NoteGen 官网</a> 下载适用于你设备的版本</p>
                    <p>安装过程简单，遵循系统提示即可完成</p>
                </div>
            </div>

            <div>
                <h3 class="text-xl font-semibold mb-4">初始设置</h3>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="step-number">1</div>
                        <div class="ml-4">
                            <h4 class="font-semibold mb-1">语言选择</h4>
                            <p class="text-gray-600">支持中文、英文和日语，可在设置 > 国际化中切换</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="step-number">2</div>
                        <div class="ml-4">
                            <h4 class="font-semibold mb-1">主题设置</h4>
                            <p class="text-gray-600">支持深色主题和自定义 Markdown/代码外观（设置 > 主题与外观）</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="step-number">3</div>
                        <div class="ml-4">
                            <h4 class="font-semibold mb-1">同步配置</h4>
                            <p class="text-gray-600">配置云端同步，确保数据安全（详见同步配置部分）</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="step-number">4</div>
                        <div class="ml-4">